<div class="viewer-container">
  <div class="flex align-items-center justify-content-between mb-4">
    <div class="flex align-items-center gap-2 header-title-container">
      <h1>Application Logs</h1>
      <p-tag
        [severity]="isConnected() ? 'success' : 'danger'"
        [value]="isConnected() ? 'Connected' : 'Disconnected'"
        [pTooltip]="isConnected() ? 'Connected to log hub' : 'Attempting to reconnect...'"
        tooltipPosition="right"
        styleClass="status-tag"
      ></p-tag>
    </div>
    <div class="log-controls flex align-items-center gap-2">
      <button
        pButton
        icon="pi pi-download"
        class="p-button-rounded p-button-text"
        (click)="exportLogs($event)"
        pTooltip="Export logs"
        tooltipPosition="left"
      ></button>
      <button
        pButton
        icon="pi pi-copy"
        class="p-button-rounded p-button-text"
        (click)="copyLogs()"
        pTooltip="Copy logs"
        tooltipPosition="left"
      ></button>
    </div>
  </div>

  <!-- Logs Card -->
  <p-card styleClass="dashboard-card h-full viewer-card">
    <ng-template pTemplate="header">
      <div class="flex align-items-center justify-content-between border-bottom-1 surface-border w-full">
        <div class="header-title-container w-full">
          <!-- Filters Section -->
          <div class="filter-container p-3 w-full">
            <p-toolbar styleClass="filter-toolbar">
              <ng-template pTemplate="start">
                <div class="flex align-items-center gap-2 flex-wrap filter-inputs-container mb-2">
                  <!-- Search Filter -->
                  <input
                    type="text"
                    pInputText
                    [ngModel]="searchFilter()"
                    (input)="onSearchChange($event)"
                    placeholder="Search logs"
                    [disabled]="!isConnected()"
                    class="search-input"
                  />

                  <!-- Level Filter -->
                  <p-select
                    [options]="levels()"
                    [ngModel]="levelFilter()"
                    placeholder="Filter by level"
                    [showClear]="true"
                    (onChange)="onLevelFilterChange($event.value)"
                    styleClass="level-dropdown fixed-width-dropdown"
                    [disabled]="!isConnected()"
                  >
                  </p-select>

                  <!-- Category Filter -->
                  <p-select
                    [options]="categories()"
                    [ngModel]="categoryFilter()"
                    placeholder="Filter by category"
                    [showClear]="true"
                    (onChange)="onCategoryFilterChange($event.value)"
                    styleClass="category-dropdown fixed-width-dropdown"
                    [disabled]="!isConnected()"
                  >
                  </p-select>
                </div>
              </ng-template>
              <ng-template pTemplate="end">
                <div class="filter-actions-container flex flex-grow-1 justify-content-end align-items-end">
                  <div class="filter-actions-wrapper">
                    <div class="filter-stats" *ngIf="isConnected() && filteredLogs().length > 0">
                      <span class="text-sm text-color-secondary">
                        Showing {{ filteredLogs().length }} of {{ logs().length }} logs
                      </span>
                    </div>
                    <!-- Clear Filters Button -->
                    <button
                      pButton
                      icon="pi pi-filter-slash"
                      label="Clear Filters"
                      class="p-button-outlined ml-2 clear-filters-btn"
                      (click)="clearFilters()"
                      [disabled]="!isConnected() || (!levelFilter() && !categoryFilter() && !searchFilter())"
                    ></button>
                  </div>
                </div>
              </ng-template>
            </p-toolbar>
          </div>
        </div>
      </div>
    </ng-template>

    <div class="card-content">
      <!-- Console-style Logs View -->
      <div class="viewer-console">
        <!-- Logs List -->
        <div class="items-list" *ngIf="filteredLogs().length > 0; else emptyLogs">
          <div *ngFor="let log of filteredLogs(); let i = index" class="item-entry" [id]="'log-' + i">
            <!-- Log Entry Header - only expandable if has exception or metadata -->
            <div
              class="item-entry-header"
              [class.expandable]="log.exception || log.jobName || log.instanceName"
              (click)="log.exception || log.jobName || log.instanceName ? toggleLogExpansion(i, $event) : null"
            >
              <!-- Actions (Copy button at start) -->
              <div class="item-actions item-actions-start">
                <button
                  pButton
                  icon="pi pi-copy"
                  class="p-button-rounded p-button-text p-button-sm"
                  (click)="copyLogEntry(log, $event)"
                  pTooltip="Copy log"
                ></button>
              </div>

              <!-- Timestamp -->
              <div class="item-timestamp">
                <span class="item-date">{{ log.timestamp | date : "yyyy-MM-dd" }}</span>
                <span class="item-time">{{ log.timestamp | date : "HH:mm:ss.SSS" }}</span>
              </div>

              <!-- Level Tag -->
              <div class="item-severity">
                <p-tag [severity]="getSeverity(log.level)" [value]="log.level" [rounded]="true"></p-tag>
              </div>

              <!-- Category -->
              <div class="item-category" *ngIf="log.category">
                {{ log.category }}
              </div>

              <!-- Message -->
              <div class="item-message">
                {{ log.message }}
              </div>

              <!-- Dropdown button (only for logs with exception or metadata) -->
              <div class="item-actions" *ngIf="log.exception || log.jobName || log.instanceName">
                <button
                  pButton
                  [icon]="expandedLogs[i] ? 'pi pi-chevron-up' : 'pi pi-chevron-down'"
                  class="p-button-rounded p-button-text p-button-sm"
                  (click)="toggleLogExpansion(i, $event)"
                  pTooltip="Toggle details"
                ></button>
              </div>
            </div>

            <!-- Log Details (Expandable) -->
            <div class="item-details" *ngIf="expandedLogs[i]">
              <!-- Exception -->
              <div class="item-exception" *ngIf="log.exception">
                <pre>{{ log.exception }}</pre>
              </div>

              <!-- Metadata -->
              <div class="item-metadata" *ngIf="log.jobName || log.instanceName">
                <div class="metadata-item" *ngIf="log.jobName">
                  <span class="metadata-label">Job:</span>
                  <span class="metadata-value">{{ log.jobName }}</span>
                </div>
                <div class="metadata-item" *ngIf="log.instanceName">
                  <span class="metadata-label">Instance:</span>
                  <span class="metadata-value">{{ log.instanceName }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Empty State -->
        <ng-template #emptyLogs>
          <div class="empty-items">
            <div class="empty-message">
              <i class="pi pi-inbox empty-icon"></i>
              <div class="empty-text" *ngIf="isConnected(); else disconnectedMessage">No logs found</div>
              <p *ngIf="isConnected()">Waiting for new logs or try adjusting your filters</p>
              <ng-template #disconnectedMessage>
                <div class="flex flex-column align-items-center gap-3">
                  <div class="empty-text">Not connected to log hub</div>
                  <p>Attempting to reconnect to the server...</p>
                  <p-progressSpinner
                    styleClass="w-3rem h-3rem"
                    strokeWidth="4"
                    fill="var(--surface-ground)"
                    animationDuration=".5s"
                  ></p-progressSpinner>
                </div>
              </ng-template>
            </div>
          </div>
        </ng-template>
      </div>
    </div>
  </p-card>

  <!-- Export Menu -->
  <p-menu #exportMenu [popup]="true" [model]="exportMenuItems" appendTo="body"></p-menu>
</div>
